<template>
  <div class="main-container">
    <el-card :body-style="{ padding: '10px' }" shadow="hover">
      <template #header>
        <div class="flex justify-between">
          <span class="text-bold text-sm"> 工作台 </span>
        </div>
      </template>
      <div class="flex margin-top">
        <div class="avatar-wrapper">
          <img :src="avatar" />
        </div>
        <div class="flex-sub flex flex-direction justify-around margin-left">
          <div class="text-xl">
            早上好，Andy，青春只有一次，别让自己过得不精彩
          </div>
          <div class="text-grey text-sm">
            <i class="el-icon-heavy-rain"></i> 今日有小雨，出门别忘记带伞哦~
          </div>
        </div>
        <div class="flex flex-direction justify-around align-end item-action">
          <div class="text-gray">项目数</div>
          <div class="text-xl">12</div>
        </div>
        <div class="flex flex-direction justify-around align-end item-action">
          <div class="text-gray">待办项</div>
          <div class="text-xl">3/20</div>
        </div>
        <div class="flex flex-direction justify-around align-end item-action">
          <div class="text-gray">当前日期</div>
          <div class="text-xl">{{ currentDate }}</div>
        </div>
      </div>
    </el-card>
    <div class="flex margin-top-xs">
      <el-card style="width: 100%" :body-style="{ padding: 0 }">
        <template #header>
          <div class="flex justify-between">
            <span class="text-bold text-sm"> 快捷操作 </span>
          </div>
        </template>
        <el-row>
          <el-col v-for="(item, index) of fastActions" :key="index" :span="4">
            <div
              @click="fastActionClick(item)"
              class="fast-item-wrapper flex flex-direction justify-center align-center"
            >
              <div
                :class="[item.icon, 'iconfont']"
                :style="{ color: item.color, 'font-size': '26px' }"
              ></div>
              <div class="margin-top-xs">{{ item.title }}</div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="flex margin-top-xs">
      <el-card style="width: 100%" :body-style="{ padding: 0 }">
        <template #header>
          <div class="flex justify-between">
            <span class="text-bold text-sm"> Admin Work 各版本说明 </span>
          </div>
        </template>
        <el-table :data="dataList" size="large" :stripe="true" :border="false">
          <el-table-column
            label="项目名称"
            prop="projectName"
          ></el-table-column>
          <el-table-column label="版本说明">
            <template v-slot="scope">
              <el-tag :type="!scope.row.isEmpower ? 'success' : 'danger'">{{
                scope.row.isEmpower ? "授权付费" : "免费开源"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template v-slot="scope">
              <el-tag
                :type="scope.row.status === '持续更新' ? 'success' : 'danger'"
                >{{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="标签" min-width="200">
            <template v-slot="scope">
              <el-space>
                <el-tag v-for="tag of scope.row.tags" :key="tag">{{
                  tag
                }}</el-tag>
              </el-space>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="100">
            <template v-slot="scope">
              <el-space>
                <el-button
                  type="primary"
                  size="small"
                  @click="onPreview(scope.row)"
                  >预览
                </el-button>
                <el-popover
                  placement="left"
                  :title="
                    scope.row.isEmpower
                      ? '添加微信好友详细咨询'
                      : '关注公众号，获取源码'
                  "
                  :width="200"
                  trigger="hover"
                >
                  <template #reference>
                    <el-button type="danger" size="small">获取源码</el-button>
                  </template>
                  <el-image
                    :src="
                      scope.row.isEmpower
                        ? 'http://arco.vueadminwork.com/assets/custom_weixin.0dc9ea7d.jpg'
                        : 'http://arco.vueadminwork.com/assets/qrcode.0a69adee.jpg'
                    "
                  />
                </el-popover>
              </el-space>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import { useRouter } from "vue-router"
import { random } from "lodash"
import useUserStore from "@/store/modules/user"
const COLORS = ["#67C23A", "#E6A23C", "#F56C6C", "#409EFF"]
const date = new Date()
export default defineComponent({
  name: "WorkPlace",
  setup() {
    const userStore = useUserStore()
    const router = useRouter()
    const fastActionClick = ({ path = "/" }) => {
      router.push(path)
    }
    function onPreview(item: { target: string | URL | undefined }) {
      window.open(item.target)
    }
    const dataList = [
      {
        key: "1",
        projectName: "Admin Work Pro",
        tags: ["vue3", "vite", "naive-ui", "typescript"],
        isEmpower: true,
        status: "持续更新",
        target: "http://p.vueadminwork.com",
      },
      {
        key: "2",
        projectName: "Arco Work",
        tags: ["vue3", "vite", "arco-design", "typescript"],
        isEmpower: false,
        status: "持续更新",
        target: "http://arco.vueadminwork.com",
      },
      {
        key: "3",
        projectName: "Admin Work",
        tags: ["vue3", "vite", "naive-ui", "typescript"],
        isEmpower: false,
        status: "持续更新",
        target: "http://aw.vueadminwork.com",
      },
      {
        key: "4",
        projectName: "Admin Work X",
        tags: ["vue3", "vite/webpack", "element-plus", "typescript"],
        isEmpower: false,
        status: "持续更新",
        target: "http://x.vueadminwork.com",
      },
      {
        key: "5",
        projectName: "Admin Work A",
        tags: ["vue3", "vite", "ant-design", "typescript"],
        isEmpower: false,
        status: "持续更新",
        target: "http://a.vueadminwork.com",
      },
      {
        key: "6",
        projectName: "Admin Work Basic",
        tags: ["vue2", "webpack", "element-ui", "javascript"],
        isEmpower: false,
        status: "停止维护",
        target: "http://qingqingxuan.gitee.io/arco-work",
      },
    ]
    return {
      dataList,
      avatar: userStore.avatar,
      currentDate:
        date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate(),
      fastActions: [
        {
          title: "首页",
          icon: "icon-dashboard-fill",
          path: "/",
          color: COLORS[random(0, COLORS.length)],
        },
        {
          title: "系统管理",
          path: "/system/department",
          icon: "icon-setting-fill",
          color: COLORS[random(0, COLORS.length)],
        },
        {
          title: "列表",
          path: "/list/table-custom",
          icon: "icon-detail-fill",
          color: COLORS[random(0, COLORS.length)],
        },
        {
          title: "表单",
          path: "/form/base-form-view",
          icon: "icon-file-text-fill",
          color: COLORS[random(0, COLORS.length)],
        },
        {
          title: "多级菜单",
          path: "/next/menu2/menu-2-1/menu-2-1-1",
          icon: "icon-golden-fill",
          color: COLORS[random(0, COLORS.length)],
        },
        {
          title: "更多功能",
          path: "/other/qrcode",
          icon: "icon-appstore-fill",
          color: COLORS[random(0, COLORS.length)],
        },
      ],
      fastActionClick,
      onPreview,
    }
  },
})
</script>

<style lang="scss" scoped>
.avatar-wrapper {
  width: 5rem;
  height: 5rem;
  & > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid yellowgreen;
  }
}
.item-action {
  position: relative;
  padding: 0 30px;
}
.item-action::after {
  position: absolute;
  top: 20%;
  right: 0;
  height: 60%;
  content: "";
  display: block;
  width: 1px;
  background-color: #e0e0e0;
}
div.item-action:last-child::after {
  width: 0;
}
.fast-item-wrapper {
  border-right: 1px solid var(--el-card-border-color);
  border-bottom: 1px solid var(--el-card-border-color);
  height: 80px;
}
.fast-item-wrapper:hover {
  cursor: pointer;
  box-shadow: 0px 0px 10px #ddd;
}
.el-link + .el-link {
  margin-bottom: 10px;
}
</style>
